<template>
  <div class="cart-icon-container" @click="navigateToCart">
    <el-badge :value="cartItemCount" :hidden="cartItemCount === 0" class="cart-badge">
      <el-icon class="cart-icon" :size="24">
        <ShoppingCart />
      </el-icon>
    </el-badge>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { ShoppingCart } from '@element-plus/icons-vue';
import { useCartStore } from '@/stores/cart';

// 路由实例
const router = useRouter();

// 购物车状态管理
const cartStore = useCartStore();

// 计算购物车商品数量
const cartItemCount = computed(() => {
  return cartStore.cartItems.length;
});

// 导航到购物车页面
const navigateToCart = () => {
  router.push('/cart');
};
</script>

<style scoped>
.cart-icon-container {
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.cart-icon-container:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

.cart-icon {
  color: #409EFF;
}

.cart-badge :deep(.el-badge__content) {
  background-color: #f56c6c;
}
</style>